<template>
  <div class="search">
    <van-nav-bar
    title="搜索"
    left-arrow
    border
    safe-area-inset-top
    z-index="999"
    @click-left="$router.go(-1)"
  />
  <!-- 搜索框 -->
  <van-search
  shape="round"
  show-action
  background="white"
  action-text="搜索"
  v-model="goodsName"
  maxlength="20"
  >
  <template #action>
    <div @click="goSearch(goodsName)"
    style="background-color:rgb(17, 141, 212);border-radius: 50%; width: 60px;text-align: center;">GO</div>
  </template>
  </van-search>
  <div class="history" v-if="history.length>0">
    <div class="title">
      <span>搜索历史</span>
      <van-icon name="delete-o" color="red" size="16" @click="clear" />
    </div>
    <div class="list" v-if="history.length>0">
      <van-row type='flex'  >
        <!-- 每个关键词 -->
          <van-col  :offset="history.indexOf(item)%5==0 ? 0: 2"
          v-for="item in history"
          :key="item"
          :class="{ 'active': selectedItem===item }"
          @click="goSearch(item)">
          <div class="wrapper"
              @touchstart="handleTouchStart(item)"
              @touchend="handleTouchEnd">
            <div class="overlay">
            </div>
            {{ item }}
          </div>
            <van-badge
            v-show="selectedItem===item"
            class="badge"
            @click.native.prevent="deleteItem(item)">
              <template #content>
                <van-icon name="cross" class="badge-icon" />
              </template>
            </van-badge>
          </van-col>
      </van-row>
    </div>
  </div>
  </div>
</template>

<script>
import { getHistory, setHistory, removeHistory } from '@/utils/storage'
document.body.addEventListener('touchstart', () => { }) // 禁止ios移动端点击出现阴影
export default {
  name: 'SearchIndex',
  data () {
    return {
      goodsName: '', // 搜索关键字
      history: getHistory(),
      selectedItem: null,
      pressTimer: null
    }
  },
  methods: {
    goSearch (goodsName) { // 搜索
      // if (!goodsName.trim()) return
      console.log(!goodsName.trim())
      if (goodsName.trim() !== '') {
        const index = this.history.indexOf(goodsName)
        if (index !== -1) {
          this.history.splice(index, 1)
        }
        this.history.unshift(goodsName)
        setHistory(this.history) // 保存搜索历史到本地存储
      }
      this.$router.push(`/searchlist?goodsName=${goodsName}`) // 搜索跳转
    },
    clear () { // 清空历史
      this.$toast.success('清空历史成功')
      this.history = []
      removeHistory()
    },
    handleTouchStart (item) {
      this.pressTimer = setTimeout(() => {
        console.log('长按了', item)
        if (!this.selectedItem) {
          this.selectedItem = item
        } else {
          this.selectedItem = null
        }
      }, 500)
    },
    handleTouchEnd () {
      clearTimeout(this.pressTimer)
      console.log('touchend')
    },
    deleteItem (item) {
      console.log('删除了', item)
      const index = this.history.indexOf(item)
      if (index !== -1) {
        this.history.splice(index, 1)
        this.selectedItem = null
      }
      setHistory(this.history) // 保存搜索历史到本地存储
    }
  }
}
</script>

<style lang="less" scoped>
@import '@/styles/search.less';
.search {
  @transitionTime: 0.5s;
  .van-nav-bar {
    background-color: #66ccff;
    ::v-deep .van-nav-bar__title {
      color: #1114ac;
    }
  }
  .van-search {
    margin-bottom: 20px;
  }
  .history {
    margin: 0 15px 0 15px;
    .title {
      // padding: 0 35px;
      color: #66ccff;
      height: search-height;
      line-height: 16px;
      display: flex;
      justify-content: space-between;
    }
    .list {
      .van-row {
        margin-bottom: 10px;
        .badge {
          position: absolute;
          top: 0;
          right: -15px;
          display: block;
          font-size: 10px;
          line-height: 16px;
          // margin-left: 4px; /* 调整徽标与文字的水平间距 */
        }
        .van-col {
          position: relative;
          width: 'auto';
          display: 'inline-block';
          height: 40px;
          line-height: 40px;
          margin: 10px,20px;
          background-color: rgba(211, 218, 223, 0.1);
          text-align: center;
          .wrapper {
            position: relative;
          }
          .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: transparent; /* 设置为透明 */
            z-index: 1; /* 确保覆盖在其他元素之上 */
          }
        }
        .active {
          transform: scale(0.9); /* 在按住或悬停时缩小到原来的0.9倍 */
          transition: transform @transitionTime ease; /* 添加过渡效果，使缩放平滑 */
        }
      }
    }
  }
}
</style>
